<template>
  <div class="channel-container">
    <en-table-layout
      :tableData="tableData.data"
      :loading="loading"
      :tips="true"
    >
      <div slot="tips">
        <h4>操作提示</h4>
        <ul>
          <li>该列表用于显示商城频道情况，点击新增数据按钮，建立新的频道。</li>
          <li>根据相关提示操作，建立所需要的频道的基本数据，可通过“修改”对已建立信息进行调整，例如频道的“名称”、“显示”、“色彩风格”等。</li>
          <li>编辑频道内容操作，可通过“编辑”进入对应页面。</li>
        </ul>
      </div>
      <div slot="toolbar" class="inner-toolbar">
        <div class="toolbar-btns">
          <el-button size="mini" type="primary" icon="el-icon-circle-plus-outline" @click="handleAddMember">新增数据</el-button>
        </div>
      </div>
      <template slot="table-columns">
        <el-table-column prop="channel_id" label="频道编号"/>
        <el-table-column prop="channel_name" label="频道名称"/>
        <el-table-column prop="channel_style" label="页面颜色">
          <template slot-scope="scope">
            <span style="width: 30px;height: 30px;border-radius: 50%;display: inline-block;" :style="{ background: scope.row.channel_style }"></span>
          </template>
        </el-table-column>
        <el-table-column label="绑定分类">
          <template slot-scope="scope">{{ scope.row.category_name || '--' }}</template>
        </el-table-column>
        <el-table-column label="启用状态">
          <template slot-scope="scope">{{ scope.row.channel_show === 1 ? '开启' : '关闭' }}</template>
        </el-table-column>
        <el-table-column prop="channel_update_time" :formatter="MixinUnixToDate" label="更新时间"/>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleReviseChannel(scope.$index, scope.row)">修改</el-button>
            <el-button
              size="mini"
              type="primary"
              @click="handleEditChannel(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDeleteChannel(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </template>
      <el-pagination
        v-if="tableData"
        slot="pagination"
        @size-change="handlePageSizeChange"
        @current-change="handlePageCurrentChange"
        :current-page="tableData.page_no"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="tableData.page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.data_total">
      </el-pagination>
    </en-table-layout>
    <!--新增频道 dialog-->
    <el-dialog
      :title="addChannelForm.channel_id ? '修改频道' : '新增频道'"
      :visible.sync="dialogAddChannel"
      width="650px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form :model="addChannelForm" :rules="addChannelRules" ref="addChannelForm" label-width="100px" inline>
        <!--频道名称-->
        <el-form-item label="频道名称：" prop="channel_name">
          <el-input placeholder="请输入频道名称" v-model="addChannelForm.channel_name" :maxlength="20"></el-input>
        </el-form-item>
        <!--SEO关键字-->
        <el-form-item label="seo关键字：" >
          <el-input placeholder="请输入网站seo关键字，最长不能超过60个字符。" :maxlength="60" v-model="addChannelForm.channel_keywords"></el-input>
        </el-form-item>
        <!--SEO描述-->
        <el-form-item label="seo描述：">
          <el-input type="textarea" placeholder="请输入网站seo描述，最长不能超过200个字符。" rows="5" :maxlength="200" v-model="addChannelForm.channel_description"></el-input>
        </el-form-item>
        <!--启用状态-->
        <el-form-item label="启用状态：">
          <el-switch v-model="addChannelForm.channel_show"></el-switch>
          <span>{{ addChannelForm.channel_show ? '开启' : '关闭'}}</span>
        </el-form-item>
        <!--色彩风格-->
        <el-form-item label="色彩风格：">
          <ul class="templates-color">
            <li v-for="(item, index) in channelStyleList"
                :key="index"
                :class="item.selected ? 'selected' : ''" 
                :style="{background: item.channel_style}"
                @click="handleChannelStyle(index, item.channel_style)">
                  <i v-if="item.selected" class="el-icon-circle-check"></i>
                  <span>{{ item.channel_text }}</span>
            </li>
          </ul>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddChannel = false">取 消</el-button>
        <el-button type="primary" @click="submitAddChannelForm('addChannelForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import * as API_Member from '@/api/member'
  import { RegExp } from '~/ui-utils'

  export default {
    name: 'channelList',
    data() {
      return {
        /** 列表loading状态 */
        loading: false,

        /** 列表参数 */
        params: {
          page_no: 1,
          page_size: 10
        },

        /** 列表数据 */
        tableData: '',

        /** 色彩风格列表 */
        channelStyleList: [
          {
            channel_style: '#C81623',
            channel_text: '深红色'
          }, {
            channel_style: '#F34235',
            channel_text: '红色'
          }, {
            channel_style: '#E81D62',
            channel_text: '粉红色'
          }, {
            channel_style: '#FF6B80',
            channel_text: '淡粉色'
          }, {
            channel_style: '#9B26AF',
            channel_text: '紫色'
          }, {
            channel_style: '#3E50B4',
            channel_text: '靛蓝色'
          }, {
            channel_style: '#2095F2',
            channel_text: '蓝色'
          }, {
            channel_style: '#02A8F3',
            channel_text: '淡蓝色'
          }, {
            channel_style: '#00BBD3',
            channel_text: '蓝绿色'
          }, {
            channel_style: '#009587',
            channel_text: '青绿色'
          }, {
            channel_style: '#4BAE4F',
            channel_text: '绿色'
          }, {
            channel_style: '#8AC249',
            channel_text: '淡绿色'
          }, {
            channel_style: '#CCDB38',
            channel_text: '黄绿色'
          }, {
            channel_style: '#FEEA3A',
            channel_text: '黄色'
          }, {
            channel_style: '#FEC006',
            channel_text: '琥珀色'
          }, {
            channel_style: '#FE9700',
            channel_text: '橙黄色'
          }, {
            channel_style: '#FE5621',
            channel_text: '深橙色'
          }, {
            channel_style: '#785447',
            channel_text: '棕色'
          }, {
            channel_style: '#9D9D9D',
            channel_text: '灰色'
          }, {
            channel_style: '#DDDDDD',
            channel_text: '淡灰色'
          }
        ],

        /** 添加频道 dialog */
        dialogAddChannel: false,

        /** 添加频道 表单数据 */
        addChannelForm: {
          channel_name: '',
          channel_keywords: '',
          channel_description: '',
          channel_show: true,
          channel_style: ''
        },

        /** 添加频道 表单规则 */
        addChannelRules: {
          channel_name: [
            this.MixinRequired('请输入频道名称！'),
            { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' },
            {
              validator: (rule, value, callback) => {
                if (!RegExp.userName.test(value)) {
                  callback(new Error('请输入汉字、字母、数字、“-”、“_”的组合！'))
                } else {
                  callback()
                }
              },
              trigger: 'blur'
            }
          ]
        }
      }
    },
    mounted() {
      this.GET_ChannelList()
    },
    methods: {
      /** 分页大小发生改变 */
      handlePageSizeChange(size) {
        this.params.page_size = size
        this.GET_ChannelList()
      },

      /** 分页页数发生改变 */
      handlePageCurrentChange(page) {
        this.params.page_no = page
        this.GET_ChannelList()
      },

      /** 添加会员 */
      handleAddMember() {
        this.channelStyleList.forEach(key => { key.selected = false })
        this.channelStyleList[0].selected = true
        this.dialogAddChannel = true
        this.addChannelForm = {
          channel_id: this.tableData.data.length,
          channel_name: '',
          channel_keywords: '',
          channel_description: '',
          channel_show: true,
          channel_style: this.channelStyleList.find(item => item.selected).channel_style
        }
      },

      /** 色彩风格 */
      handleChannelStyle(index, channelStyle) {
        this.GET_ChannelList()
        this.channelStyleList.forEach(key => { key.selected = false })
        this.channelStyleList[index].selected = true
        this.addChannelForm.channel_style = channelStyle
        console.log(index, this.channelStyleList)
      },

      /** 修改 */
      handleReviseChannel(index, row) {
        console.log(index, row)
        row.channel_show = row.channel_show === 1 ? 'true' : false
        this.channelStyleList.forEach(item => {
          item.selected = false
          if (item.channel_style === row.channel_style) {
            item.selected = true
          }
        })
        this.dialogAddChannel = true
        this.addChannelForm = row
      },

      /** 编辑 */
      handleEditChannel(index, row) {
        this.$router.push({
          name: 'channelDecoration',
          params: {
            channel_id: row.channel_id,
            callback: this.GET_ChannelList
          }
        })
      },

      /** 删除 */
      handleDeleteChannel(index, row) {
        this.$confirm('确定要删除这个频道吗？', '提示', { type: 'warning' }).then(() => {
          console.log(index, row)
        }).catch(() => {})
      },

      /** 提交添加频道表单 */
      submitAddChannelForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const params = this.MixinClone(this.addChannelForm)
            params.channel_show = params.channel_show ? 1 : 0
            // this.tableData.data.push(params)
            this.dialogAddChannel = false
            this.$message.success('添加成功！')
            console.log(params)
          } else {
            this.$message.error('表单填写有误，请检查！')
            return false
          }
        })
      },

      /** 获取频道列表 */
      GET_ChannelList() {
        this.loading = true
        const tableData = {
          data: [
            {
              channel_id: 0,
              channel_style: '#9B26AF',
              channel_name: '个护化妆',
              category_name: '',
              channel_show: 0,
              channel_update_time: 1589002355
            }, {
              channel_id: 1,
              channel_style: '#FF6B80',
              channel_name: '数码家电',
              category_name: '数码办公',
              channel_show: 1,
              channel_update_time: 1588999918
            }, {
              channel_id: 2,
              channel_style: '#00BBD3',
              channel_name: '服装鞋包',
              category_name: '服饰鞋帽',
              channel_show: 1,
              channel_update_time: 1588996608
            }
          ],
          data_total: 3,
          page_no: 1,
          page_size: 10
        }
        this.loading = false
        this.tableData = tableData
        this.channelStyleList[0].selected = true
      }
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
  .tips-info ul li {
    line-height: 20px;
  }
  .el-form-item {
    width: 100%;
    min-width: 500px;
    /deep/ .el-form-item__content {
      width: 80%;
    }
  }
  .templates-color {
    padding: 0;
    list-style-type: none;
    li {
      display: inline-block;
      position: relative;
      z-index: 1;
      width: 75px;
      margin: 0 10px 10px 0;
      border-radius: 4px;
      color: #FFF;
      text-align: center;
      cursor: pointer;
    }
  }
</style>
